---
import BaseHead from '../components/BaseHead.astro';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import { SITE_TITLE, SITE_DESCRIPTION } from '../consts';
---

<!doctype html>
<html lang="en">
  <head>
    <BaseHead title={SITE_TITLE} description={SITE_DESCRIPTION} />
  </head>
  <body class="bg-white font-body text-navy">
    <Header title={SITE_TITLE} />
    <main>
      <div class="bg-white py-12 sm:py-20">
        <div class="mx-auto max-w-3xl px-6 lg:px-8">
          <div class="mx-auto max-w-4xl sm:text-center">
            <h2
              class="mt-2 text-4xl font-bold font-heading tracking-tight text-gray-900 uppercase sm:text-5xl"
            >
              Choose the right plan for&nbsp;you
            </h2>
          </div>
          <p
            class="font-body mx-auto mt-6 max-w-2xl text-xl text-left leading-8 text-gray-600"
          >
            Shepherd remains an open-source MIT-licensed software, and this
            commitment is unwavering. Our library serves as a foundation for
            countless solo developers and esteemed organizations, empowering
            them to create their applications. With a thriving community of
            users, the ongoing enhancement and upkeep of the library,
            documentation, and community engagement demand significant
            resources. Your support is essential for us to continue this
            mission.
          </p>

          <div class="my-20 flow-root">
            <div
              class="isolate -mt-16 grid max-w-3xl grid-cols-1 gap-y-16 divide-y divide-gray-100 sm:mx-auto lg:-mx-8 lg:mt-0 lg:max-w-none lg:grid-cols-2 lg:divide-x lg:divide-y-0 xl:-mx-4"
            >
              <div class="pt-16 lg:px-8 lg:pt-0 xl:px-14">
                <h3 class="font-heading p-2 text-xl uppercase w-full">
                  Open Source
                </h3>
                <p class="mt-6 flex items-baseline gap-x-1">
                  <span class="text-5xl font-bold tracking-tight text-gray-900"
                    >$0</span
                  >
                  <span class="text-sm font-semibold leading-6 text-gray-600"
                    >/month</span
                  >
                </p>
                <div class="bg-navy font-heading inline-block mb-4 w-56">
                  <a
                    class="button bg-white border-2 border-navy p-6 text-navy whitespace-nowrap w-full"
                    href="https://github.com/shepherd-pro/shepherd"
                    aria-describedby="link to github"
                  >
                    Enjoy Free Software!
                  </a>
                </div>
                <p class="mt-10 text-m font-semibold leading-6 text-gray-900">
                  Everything necessary to get started.
                </p>
                <ul
                  role="list"
                  class="mt-6 space-y-3 text-l leading-6 text-gray-600"
                >
                  <li class="flex gap-x-3">
                    <svg
                      class="h-6 w-5 flex-none text-indigo-600"
                      viewBox="0 0 20 20"
                      fill="currentColor"
                      aria-hidden="true"
                    >
                      <path
                        fill-rule="evenodd"
                        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
                        clip-rule="evenodd"></path>
                    </svg>
                    User Onboarding Tours and Feature Guides
                  </li>
                  <li class="flex gap-x-3">
                    <svg
                      class="h-6 w-5 flex-none text-indigo-600"
                      viewBox="0 0 20 20"
                      fill="currentColor"
                      aria-hidden="true"
                    >
                      <path
                        fill-rule="evenodd"
                        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
                        clip-rule="evenodd"></path>
                    </svg>
                    Basic JS Library
                  </li>
                  <li class="flex gap-x-3">
                    <svg
                      class="h-6 w-5 flex-none text-indigo-600"
                      viewBox="0 0 20 20"
                      fill="currentColor"
                      aria-hidden="true"
                    >
                      <path
                        fill-rule="evenodd"
                        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
                        clip-rule="evenodd"></path>
                    </svg>
                    REST API <em>(Coming Soon)</em>
                  </li>
                  <li class="flex gap-x-3">
                    <svg
                      class="h-6 w-5 flex-none text-indigo-600"
                      viewBox="0 0 20 20"
                      fill="currentColor"
                      aria-hidden="true"
                    >
                      <path
                        fill-rule="evenodd"
                        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
                        clip-rule="evenodd"></path>
                    </svg>
                    Support via Community & Docs
                  </li>
                  <li class="flex gap-x-3">
                    <svg
                      class="h-6 w-5 flex-none text-indigo-600"
                      viewBox="0 0 20 20"
                      fill="currentColor"
                      aria-hidden="true"
                    >
                      <path
                        fill-rule="evenodd"
                        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
                        clip-rule="evenodd"></path>
                    </svg>
                    Self-Hosted
                  </li>
                </ul>
              </div>

              <div class="pt-16 lg:px-8 lg:pt-0 xl:px-14">
                <h3 class="font-heading p-2 text-xl uppercase w-full">
                  Shepherd Pro Service
                </h3>
                <p class="mt-6 mb-4 flex items-baseline gap-x-1">
                  <span class="text-4xl font-bold tracking-tight text-gray-900"
                    >Request a Quote</span
                  >
                </p>

                <div class="bg-navy font-heading inline-block mb-4 w-56">
                  <a
                    class="button bg-white border-2 border-navy p-6 text-navy whitespace-nowrap w-full"
                    href="mailto:hello@shepherdpro.com"
                    aria-describedby="tier-growth"
                  >
                    Contact Us
                  </a>
                </div>
                <p class="mt-10 text-m font-semibold leading-6 text-gray-900">
                  Let us help you get the most out of Shepherd and provide
                  support for an on premise solution.
                </p>
                <ul
                  role="list"
                  class="mt-6 space-y-3 text-m leading-6 text-gray-600"
                >
                  <li class="flex gap-x-3">
                    <svg
                      class="h-6 w-5 flex-none text-indigo-600"
                      viewBox="0 0 20 20"
                      fill="currentColor"
                      aria-hidden="true"
                    >
                      <path
                        fill-rule="evenodd"
                        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
                        clip-rule="evenodd"></path>
                    </svg>
                    White-Glove Services
                  </li>
                  <li class="flex gap-x-3">
                    <svg
                      class="h-6 w-5 flex-none text-indigo-600"
                      viewBox="0 0 20 20"
                      fill="currentColor"
                      aria-hidden="true"
                    >
                      <path
                        fill-rule="evenodd"
                        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
                        clip-rule="evenodd"></path>
                    </svg>
                    On-Boarding & Training
                  </li>
                  <li class="flex gap-x-3">
                    <svg
                      class="h-6 w-5 flex-none text-indigo-600"
                      viewBox="0 0 20 20"
                      fill="currentColor"
                      aria-hidden="true"
                    >
                      <path
                        fill-rule="evenodd"
                        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
                        clip-rule="evenodd"></path>
                    </svg>
                    Advanced analytics
                  </li>
                  <li class="flex gap-x-3">
                    <svg
                      class="h-6 w-5 flex-none text-indigo-600"
                      viewBox="0 0 20 20"
                      fill="currentColor"
                      aria-hidden="true"
                    >
                      <path
                        fill-rule="evenodd"
                        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
                        clip-rule="evenodd"></path>
                    </svg>
                    Support via Professional Services
                  </li>
                  <li class="flex gap-x-3">
                    <svg
                      class="h-6 w-5 flex-none text-indigo-600"
                      viewBox="0 0 20 20"
                      fill="currentColor"
                      aria-hidden="true"
                    >
                      <path
                        fill-rule="evenodd"
                        d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
                        clip-rule="evenodd"></path>
                    </svg>
                    Self-Hosted, SaaS or Private Cloud
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
    <Footer />
  </body>
</html>
